<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2023-11-17 13:29:46
 * @LastEditors: 陈波
 * @LastEditTime: 2024-04-08 16:43:18
 * @Description: 
 * @FilePath: \graDesign\src\views\TD3\TD3AlgorithmVisual\index.vue
-->
<template>
  <div class="home">
    <LayoutDetail>
      <el-row justify="space-around">
        <el-col 
          :span="7"
          v-for="(item, index) in imgArr1"
          :key="index"
          @click="showImg(item.src)"
        >
          <el-image :src="item.src" fit="cover" />
          <span>{{ item.alt }}</span>
        </el-col>
      </el-row>
      <el-row class="row-bg" justify="space-around">
        <el-col 
          :span="7"
          v-for="(item, index) in imgArr2"
          :key="index"
          @click="showImg(item.src)"
        >
          <el-image :src="item.src" fit="cover" />
          <span>{{ item.alt }}</span>
        </el-col>
      </el-row>
    </LayoutDetail>

    <!-- 查看头像/人脸 -->
    <BasicDialog
      :visible="imgDialogVisible"
      width="60%"
      top="2%"
      :showClose="true"
      @handleClose="close"
    >
      <img 
        style="width: 100%; height: 100%;" 
        :src="imgSrc"
      >
    </BasicDialog>
  </div>
</template>

<script setup lang="ts">
import accuracy from '@/assets/images/TD3/accuracy.jpg'
import AEgains from '@/assets/images/TD3/AE-gains.jpg'
import AEgains1 from '@/assets/images/TD3/AE-gains1.jpg'
import energy from '@/assets/images/TD3/energy.jpg'
import penalty from '@/assets/images/TD3/penalty.jpg'
import runtime from '@/assets/images/TD3/runtime.jpg'
import sns from '@/assets/images/TD3/sns.png'
import { ref } from 'vue'

const imgArr1 = ref([
  {
    src: accuracy,
    alt: 'accuracy'
  },
  // {
  //   src: AEgains,
  //   alt: 'AE-gains'
  // },
  {
    src: sns,
    alt: 'sns'
  },
  {
    src: AEgains1,
    alt: 'AE-gains'
  }
])

const imgArr2 = ref([
  {
    src: energy,
    alt: 'energy'
  },
  {
    src: penalty,
    alt: 'penalty'
  },
  {
    src: runtime,
    alt: 'runtime'
  }
])

const imgDialogVisible = ref<boolean>(false)

const close = () => {
  imgDialogVisible.value = false
}

let imgSrc = ref<string>('')
const showImg = (src: string) => {
  imgDialogVisible.value = true;
  imgSrc.value = src;
}

</script>

<style scoped lang="scss">
.el-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  span {
    font-weight: 600;
  }
}
.row-bg {
  margin-top: 20px;
}
</style>